<!--下拉联动 optionList :props="propsCascader"-->
<template>
  <el-cascader
    v-model="value"
    v-bind="$attrs"
    :clearable="clearable"
    :options="myoptionList"
    :filter-method="filterMethod"
    filterable
    :props="propsCascader"
  >
  </el-cascader>
</template>

<script lang="ts">
  import { computed, defineComponent, reactive } from 'vue'
  // import { ElCascader } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import {
    itemProps,
    itemController, 
    getChildrenOne,
    getChildren,
    shallowToDeep,
    // cascaderManage,
    loadController
  } from '../map'
  

  const foo2 = [
    { parentId: '', value: 'zhinan', label: '指南' },
    { parentId: '', value: 'zujian', label: '组件' },
    { parentId: '', value: 'ziyuan', label: '资源' },
    { parentId: 'zhinan', value: 'shejiyuanze', label: '设计原则' },
    { parentId: 'zhinan', value: 'daohang', label: '导航', leaf: true },
    { parentId: 'zujian', value: 'basic', label: 'basic', leaf: true },
    { parentId: 'zujian', value: 'form', label: 'form', leaf: true },
    { parentId: 'shejiyuanze', value: 'yizhi', label: '一致', leaf: true },
    { parentId: 'shejiyuanze', value: 'fankui', label: '反馈', leaf: true }
  ]

  const cascaderManage = (props) => {
    const levelName = props.formItemMeta.colName.split('_')

    // 不需要动态联动
    const noLazy = {
      // checkStrictly: true,
      lazy: false
    }

    // 需要动态联动
    const propsCascader = reactive({
      // multiple: false, // 单选还是多选 多选返回 value 的二维数组
      lazy: true, // 动态级联
      lazyLoad (node, resolve) { // 响应函数resolve
      console.log(node)
        const { level } = node
        // 判断级数是否超过数组下标
        if (levelName.length >= level) {
          // 找到子数据-
          const key = levelName[level]
          const newNode = [{
            value: '222',
            label: '选项11',
            leaf: true
          }]
          // const newNode = data[key].filter((item) => item.parentId === node.value)
          resolve(newNode) // 交给组件
        } else {
          resolve([{
            value: '22',
            label: '选项11',
            leaf: true
          }])
        }
      }
    })
    return { propsCascader: noLazy }
    // return {    propsCascader  }
  }


  export default defineComponent({
    name: 'el-from-item-select-cascader',
    inheritAttrs: false,
    components: {
      // ElCascader
    },
    props: {
      ...itemProps, // 基础属性
      optionKind: {
        type: String,
        default: 'deep' // deep 前端嵌套风格； shallow 后端浅层多数组风格
      },
      cascaderProps: { // cascader 的 props
        type: Object,
        default: () => { return {} }
      },
      colName: String, // 变更字段名称
      modelValue: [String, Number, Array]
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      const {
        propsCascader
      } = cascaderManage(props)

      const { value } = itemController(props, context.emit)
      const filterMethod = (node, value) => {
      }


      // const newOpt2 = getChildrenOne(foo2, '', 0)

      const optionList = props.optionList

      const myoptionList = computed(() => {
        if (Array.isArray(optionList)){
          // 数组类型
          // 没有数据
          if (optionList.length === 0) return optionList

          // 原生模式
          if (optionList[0].children) 
            return optionList

          // 单表
          if (typeof optionList[0].parentId !== 'undefined')
            return getChildrenOne(optionList, '', 0)

          if (typeof optionList[0] === 'object') {
            // 多表
            return shallowToDeep(optionList[0])
          }
        }
      })

      // 从后端获取数据
      const { loadDict } = loadController(props)
      loadDict()

      // 监听联动的值的变化

      /**
       * 来源：json 、后端API、第三方API、前端缓存
       * 结构：前端风格、多层，后端多表，后端单表
       * 完整度：完整，需要根据选项动态加载。
       * 
       */
      return {
        propsCascader,
        myoptionList,
        filterMethod,
        value
      }
    }
  })
</script>
